/**
 * Tab - Universal Tab Component
 * 
 * Features:
 * - Active state styling
 * - Close button (optional)
 * - Unread badge (optional)
 * - Icon support
 * - Hover effects
 * - Draggable (via props)
 */

import { forwardRef, type MouseEvent, type ReactNode } from 'react';
import { X } from 'lucide-react';
import { cn } from '@/lib/utils';

export interface TabProps {
  id: string;
  label: string;
  icon?: ReactNode;
  active?: boolean;
  closable?: boolean;
  unreadCount?: number;
  pinned?: boolean;
  onClick?: () => void;
  onClose?: (e: MouseEvent) => void;
  onMiddleClick?: () => void;
  className?: string;
  draggable?: boolean;
  onDragStart?: (e: React.DragEvent) => void;
  onDragEnd?: (e: React.DragEvent) => void;
  onDragOver?: (e: React.DragEvent) => void;
  onDrop?: (e: React.DragEvent) => void;
}

export const Tab = forwardRef<HTMLDivElement, TabProps>(({
  id,
  label,
  icon,
  active = false,
  closable = true,
  unreadCount,
  pinned = false,
  onClick,
  onClose,
  onMiddleClick,
  className,
  draggable = true,
  onDragStart,
  onDragEnd,
  onDragOver,
  onDrop,
}, ref) => {
  const handleClick = () => {
    if (!active) {
      onClick?.();
    }
  };

  const handleClose = (e: MouseEvent) => {
    e.stopPropagation();
    onClose?.(e);
  };

  const handleMouseDown = (e: MouseEvent) => {
    // Middle click to close
    if (e.button === 1) {
      e.preventDefault();
      onMiddleClick?.();
    }
  };

  return (
    <div
      ref={ref}
      data-tab-id={id}
      data-active={active}
      draggable={draggable && !pinned}
      onDragStart={onDragStart}
      onDragEnd={onDragEnd}
      onDragOver={onDragOver}
      onDrop={onDrop}
      onClick={handleClick}
      onMouseDown={handleMouseDown}
      className={cn(
        'group relative flex items-center gap-2 px-3 py-1.5',
        'rounded-md transition-all duration-200 cursor-pointer',
        'select-none',
        // Active state
        active && [
          'bg-accent text-foreground shadow-sm',
          'before:absolute before:bottom-0 before:left-0 before:right-0',
          'before:h-0.5 before:bg-primary before:rounded-full',
        ],
        // Inactive state
        !active && [
          'text-muted-foreground hover:bg-accent/30 hover:text-foreground',
        ],
        // Pinned state
        pinned && 'pr-2',
        className
      )}
      title={label}
    >
      {/* Icon */}
      {icon && (
        <span className="flex-shrink-0 w-4 h-4">
          {icon}
        </span>
      )}

      {/* Label */}
      <span className="truncate max-w-[150px] text-sm font-medium">
        {label}
      </span>

      {/* Unread Badge */}
      {unreadCount !== undefined && unreadCount > 0 && (
        <span className={cn(
          'flex-shrink-0 inline-flex items-center justify-center',
          'min-w-[18px] h-[18px] px-1 rounded-full',
          'bg-primary text-primary-foreground',
          'text-xs font-semibold',
          active ? 'animate-none' : 'animate-pulse'
        )}>
          {unreadCount > 99 ? '99+' : unreadCount}
        </span>
      )}

      {/* Close Button */}
      {closable && !pinned && (
        <button
          onClick={handleClose}
          className={cn(
            'flex-shrink-0 w-4 h-4 rounded-sm',
            'opacity-0 group-hover:opacity-100 transition-opacity',
            'hover:bg-destructive/20 hover:text-destructive',
            'flex items-center justify-center',
            // Always show when active
            active && 'opacity-70'
          )}
          title="关闭 (Ctrl+W)"
        >
          <X className="w-3 h-3" />
        </button>
      )}

      {/* Pinned Indicator */}
      {pinned && (
        <span className="flex-shrink-0 w-1 h-1 rounded-full bg-primary" />
      )}
    </div>
  );
});

Tab.displayName = 'Tab';

